<template>
	<view class="select-box">
		<view class="select-box_title">{{title}}</view>
		<view class="select-box_list l-f l-wrap">
			<view 
			@click.stop="onEvent(index,item.disabled)"
			class="select-box_list_item"
			:class="[
				current === index ? 'select-box_list_item-active' : '',
				item.disabled ? 'select-box_list_item-disabled' : ''
			]"
			hover-class="hover-class"
			v-for="(item,index) in list" 
			:key="index">
			{{item.label}}{{item.disabled ? '(无货)' : ''}}
			</view>
		</view>
	</view>
</template>

<script lang="ts" name="selectBox" setup>
	defineProps({
		title: {
			type: String,
			default: ''
		},
		list: {
			required: true,
			type: Object,
			default() {
				return {}
			}
		},
		current: {
			type: Number,
			default: -1
		}
	})
	const emits = defineEmits(['change'])
	const onEvent = (index: number,disabled: boolean) => {
		!disabled && emits('change',index)
	}
</script>

<style lang="scss" scoped>
.select-box {
	margin-bottom: 30rpx;
	&_title {
		font-size: 34rpx;
		color: #000000;
		font-weight: 700;
		height: 70rpx;
		line-height: 70rpx;
	}
	&_list {
		&_item {
			font-size: 28rpx;
			color: #686868;
			padding: 10rpx 30rpx;
			box-sizing: border-box;
			background-color: #FAFAFA;
			border: 1rpx solid #FAFAFA;
			border-radius: 30rpx;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}
		&_item-active {
			color: #D23943;
			background-color: #FEEAEC;
			border: 1rpx solid #D23943;
		}
		&_item-disabled {
			color: #cccccc;
		}
	}
}
</style>